山海以南

Vue 规范

MuYan2022-04-15规范规范

Vue 规范

目录 目录统一使用kebab-case风格

views 下的文件

  • js 类文件使用PascalCase，如UserInfo.js

  • 其他资源文件统一使用kebab-case 风格，如user-detail.js, user-detail.css, user-avatar.png

** 组件文件

  • 命名遵循PascalCase约定。 组件文件名除index.vue之外，一律采用PascalCase(大驼峰)写法。原因是引入组件时，组件的变量通常用PascalCase格式，以区别于一般变量。组件文件名与变量名一致，方便对应。
import UserBook from "./user/UserBook";

  • 组件名应该始终是多个单词的，根组件 App 除外 html 元素都是单个单词的（如<article>,<header>)，为了区分组件和一般html元素，组件由多个单词组成，如BookItem.vue，单独的Book.vue不推荐。

  • 组件使用遵循kebab-case 约定 在页面中使用组件需要前后闭合，并以短线分隔，如：

<user-book></user-book> <user-book />

开发规范

文件结构

  • 基本结构

顺序：template -> script -> style。一个组件尽量不要超过200行，页面包含独立部分时尽量分离成子组件。页面应该由各个小组件组成

<template>
  <div>
    <component-a />
    <component-b />
    <component-c />
  </div>
</template>
<script>
export default {
  components: {},
  data() {
    return {};
  },
  created() {},
  methods: {},
};
</script>
<!-- 声明语言，并且添加scoped -->
<style lang="scss" scoped>
...
</style>
  • 组件/实例的选项顺序
- name          (全局引用)
- components    (模板依赖)
- directives    ...
- filters       ...
- mixins        (组合)
- props         (接口)
- data          (本地状态属性)
- computed      ...
- watch         (响应回调)
- created       (生命周期函数)
- mounted       ...
- methods       (实例属性)

Vue Router 规范

  • router path采用kebab-case格式。

用下划线（如：/user_info）或camelCase（如：/userInfo)的单词被当成一个单词，搜索引擎无法区分语义。

  • router name采用kebabCase格式。
// bad
{
    path: '/user_info', // user_info当成一个单词
    name: 'UserInfo',
    component: UserInfo,
    meta: {
    title: ' - 用户',
    desc: ''
    }
},
// good
{
    path: '/user-info', // 能解析成user info
    name: 'UserInfo',
    component: UserInfo,
    meta: {
    title: ' - 用户',
    desc: ''
}

组件开发规范

1. 注册组件

注册组件的时候，全部使用 PascalCase 格式。

import UserBook from './user/UserBook'
复制代码

2. props 命名规范

  • 在声明prop的时候，其命名应该始终使用camelCase，而在模板中应该始终使用kebab-case
<welcome-message greeting-text="hi"></welcome-message>
<script>
  props: {
    greetingText: String;
  }
</script>
复制代码
  • prop 定义应该尽量详细1.申明类型 type（必填）2.提供默认值（必填3.校验类型(可选)
// bad 这样做只有开发原型系统时可以接受
props: ['status']
// good
props: {
 status: {
   type: String,
   required: true,
   default: ''
   }
 }
}
复制代码

methods 命名规范

  • 驼峰式命名camelCase，操作性函数统一使用动词或者动词+名词形式
jumpPage() {
}
openCarInfoDialog () {

}
复制代码
  • 请求数据方法，以 data 结尾
getListData () {

}
postFormData () {

}
复制代码
  • 注: 尽量使用常用单词开头（set、get、go、can、has、is）

** 附： 函数方法常用的动词:

get 获取/set 设置,
add 增加/remove 删除
create 创建/destory 移除
start 启动/stop 停止
open 打开/close 关闭,
read 读取/write 写入
load 载入/save 保存,
create 创建/destroy 销毁
begin 开始/end 结束,
backup 备份/restore 恢复
import 导入/export 导出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附着/detach 脱离
bind 绑定/separate 分离,
view 查看/browse 浏览
edit 编辑/modify 修改,
select 选取/mark 标记
copy 复制/paste 粘贴,
undo 撤销/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 减少
play 播放/pause 暂停,
launch 启动/run 运行
compile 编译/execute 执行,
debug 调试/trace 跟踪
observe 观察/listen 监听,
build 构建/publish 发布
input 输入/output 输出,
encode 编码/decode 解码
encrypt 加密/decrypt 解密,
compress 压缩/decompress 解压缩
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 连接/disconnect 断开,
send 发送/receive 接收
download 下载/upload 上传,
refresh 刷新/synchronize 同步
update 更新/revert 复原,
lock 锁定/unlock 解锁
check out 签出/check in 签入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展开/collapse 折叠
begin 起始/end 结束,
start 开始/finish 完成
enter 进入/exit 退出,
abort 放弃/quit 离开
obsolete 废弃/depreciate 废旧,
collect 收集/aggregate 聚集

多个属性的标签元素规范

<!-- bad -->
<img src="https://user-gold-cdn.xitu.io/2020/4/27/171bab9e9687bb00?w=400&h=400&f=png&s=3451" alt="Vue Logo">
<my-component foo="fooattribute" bar="barattribute" baz="bazattribute"></my-component>
<!-- good -->
<img
  src="https://user-gold-cdn.xitu.io/2020/4/27/171bab9e9687bb00?w=400&h=400&f=png&s=3451"
  alt="Vue Logo"
>
<my-component
  foo="fooattribute"
  bar="barattribute"
  baz="bazattribute"
>
</my-component>

元素属性的顺序

原生属性放前面，指令放后面

- class
  - id,ref
  - name
  - data-*
  - src, for, type, href,value,max-length,max,min,pattern
  - title, alt，placeholder
  - aria-*, role
  - required,readonly,disabled
  - is
  - v-for
  - key
  - v-if
  - v-else-if
  - v-else
  - v-show
  - v-cloak
  - v-pre
  - v-once
  - v-model
  - v-bind,:
  - v-on,@
  - v-html
  - v-text

指令规范

  • 指令有缩写则一律采用缩写形式
// bad
v-bind:code="code"
v-on:click="getUserData"
// good
:code="code"
@click="getUserData"
  • v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一，添加 key 可提高性能
<!-- bad -->
<ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
</ul>
<!-- good -->
<ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
</ul>
  • 避免 v-if 和 v-for 同时用在一个元素上（性能问题）

出现这样的需求，有两种解决方案： 1.将数据替换为一个计算属性，让其返回过滤后的列表

<!-- bad -->
<ul>
    <li v-for="user in users" v-if="user.isActive" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
<!-- good -->
<ul>
    <li v-for="user in activeUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
<script>
computed: {
  activeUsers: function () {
    return this.users.filter(function (user) {
      return user.isActive
    })
  }
}
</script>

2.将 v-if 移动至容器元素上 (比如 ul, ol)

<!-- bad -->
<ul>
    <li v-for="user in users" v-if="shouldShowUsers" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
<!-- good -->
<ul v-if="shouldShowUsers">
    <li v-for="user in users" :key="user.id">
      {{ user.name }}
    </li>
  </ul>
上次更新 2026/6/23 11:49:15
0  字
评论
  • 按正序
  • 按倒序
  • 按热度
Powered by Waline v2.15.8
本页目录